<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请登录...</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/login.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="shortcut icon" href="./images/mycat.png" type="image/x-icon">
</head>

<body>
    <canvas id="cas"></canvas>

    <div id="ckbox">
        <p id="ask"></p>
        <button class="yes" onclick="toNone()">好的</button>
    </div>
    <div id="shadow"></div>

    <div class="container">
        <div class="myBox" data-tilt data-tilt-max="5" data-tilt-speed="800">
            <div class="loginHeader">
                <div id="back" onclick="location='index.htm'"><svg style="color:rgba(15, 155, 255, 0.747); width: 3em;height: 3em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2071"><path d="M512 128c211.74 0 384 172.26 384 384S723.74 896 512 896 128 723.74 128 512s172.27-384 384-384m0-64C264.58 64 64 264.58 64 512s200.58 448 448 448 448-200.58 448-448S759.42 64 512 64zM704 480H397.26L501 376.23A32 32 0 0 0 455.77 331L297.38 489.37s-0.05 0.09-0.09 0.13A32.26 32.26 0 0 0 288 512a32.38 32.38 0 0 0 9.37 22.58L455.77 693A32 32 0 1 0 501 647.76L397.26 544H704a32 32 0 0 0 0-64z" p-id="2072"></path></svg></div>
                <h2>登录</h2>
            </div>
            <div class="inputBox">
                <input class="inpt" id="account" type="text" placeholder="请输入账号...">
                <div>
                    <input class="inpt" id="pass" type="password" placeholder="请输入密码...">
                    <svg id="showpswd" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1992"><path d="M512 352c-89.6 0-160 70.4-160 160s70.4 160 160 160 160-70.4 160-160S601.6 352 512 352zM512 608c-54.4 0-96-41.6-96-96s41.6-96 96-96 96 41.6 96 96S566.4 608 512 608zM956.8 499.2C886.4 320 697.6 192 512 192 297.6 192 153.6 358.4 67.2 496c-6.4 9.6-6.4 22.4 0 32C153.6 665.6 297.6 832 512 832c185.6 0 374.4-128 444.8-307.2C960 515.2 960 508.8 956.8 499.2zM512 768c-176 0-300.8-134.4-377.6-256 76.8-121.6 201.6-256 377.6-256 153.6 0 316.8 108.8 380.8 256C828.8 659.2 665.6 768 512 768z" p-id="1993"></path></svg>
                </div>
                <a class="enter" onclick="enterMain()">登录</a>
            </div>
            <div class="otherWay">
                <p>第三方授权登录：</p>
                <a href="#"><svg class="icon" style="width: 2em;height: 2em;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10658"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#4186F5" p-id="10659"></path><path d="M611.944 302.056c0-15.701 2.75-30.802 7.816-44.917a384.238 384.238 0 0 0-186.11 2.956c-74.501-50.063-93.407-71.902-107.975-39.618a136.243 136.243 0 0 0-3.961 102.287 149.515 149.515 0 0 0-39.949 104.806c0 148.743 92.139 181.875 179.961 191.61a83.898 83.898 0 0 0-25.192 51.863c-40.708 22.518-91.94 8.261-115.181-32.058a83.117 83.117 0 0 0-60.466-39.98s-38.871-0.361-2.879 23.408a102.97 102.97 0 0 1 43.912 56.906s23.398 75.279 133.531 51.863v65.913c0 10.443 13.548 42.63 102.328 42.63 71.275 0 94.913-30.385 94.913-42.987V690.485a90.052 90.052 0 0 0-26.996-72.03c83.996-9.381 173.328-40.204 179.6-176.098a164.706 164.706 0 0 1-21.129 1.365c-84.07 0-152.223-63.426-152.223-141.666z" fill="#FFFFFF" p-id="10660"></path><path d="M743.554 322.765a136.267 136.267 0 0 0-3.961-102.289s-32.396-10.445-107.979 39.618a385.536 385.536 0 0 0-11.853-2.956 132.623 132.623 0 0 0-7.816 44.917c0 78.24 68.152 141.667 152.222 141.667 7.171 0 14.222-0.472 21.129-1.365 0.231-5.03 0.363-10.187 0.363-15.509a149.534 149.534 0 0 0-42.105-104.083z" fill="#FFFFFF" opacity=".4" p-id="10661"></path></svg>
                </a>
                <a href="#"><svg class="icon" style="width: 2em;height: 2em;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12470"><path d="M214.8 389.9c-4.2 11.2 2 18.3 0 61-0.5 11.5-50.1 63.5-69.7 117.5C125.5 622 122.9 678 153 700s58.1-73.2 61.8-59.4c1.6 6 3.6 12.3 6 18.8 9.6 26 25.8 54.7 49.3 81.5 4.8 5.5-29 15.5-49.3 49.9-20.3 34.4 5.8 97.1 106.5 97.1 129.9 0 159-45.7 161.6-45.5 9.7 0.7 10.3 0 20.6 0 12.6 0 7.4 1 19 0 6.3-0.5 69.5 54.7 156.9 45.5 149-15.7 126.2-65.6 114.5-97.1-12.2-32.9-55.4-48.3-53.4-50.4 35.7-39.4 41.3-63.6 53.4-99.9 5-14.9 39.5 81.9 66.2 59.4 11.1-9.4 33.3-48.5 11.1-131.5-22.2-83-65.1-101.9-64.2-117.4 1.9-32.4 0.8-55.1-0.8-61-7.9-28.5-24.5-22.2-24.5-28.5C787.7 197.2 664.2 64 511.8 64c-152.4 0-275.9 133.2-275.9 297.5-0.1 12.9-11.6 3.3-21.1 28.4z" fill="#68A5E1" p-id="12471"></path></svg>
                </a>
                <a href="#"><svg class="icon" style="width: 2em;height: 2em;fill: currentColor;overflow: hidden;" viewBox="0 0 1331 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8028"><path d="M529.91999997 138.23999998C349.86666697 138.23999998 202.23999997 257.70666698 202.23999997 415.06133298c0 88.746667 48.469333 161.621333 130.389333 219.136l-34.133333 99.157334 116.394667-58.709334a549.717333 549.717333 0 0 0 137.898666 19.114667s-47.957333-169.813333 91.477334-269.653333c127.488-90.624 211.797333-73.557333 211.797333-73.557334C828.41599997 216.74666698 688.98133297 138.23999998 529.91999997 138.23999998z m-107.349333 219.136c-24.234667 0-49.493333-16.042667-49.493334-40.277333s25.258667-40.277333 49.493334-40.277334a39.082667 39.082667 0 0 1 40.96 40.277334 39.594667 39.594667 0 0 1-40.96 40.277333z m228.352 0a44.032 44.032 0 0 1-47.274667-40.277333 43.349333 43.349333 0 0 1 47.616-40.277334 38.058667 38.058667 0 0 1 41.642667 40.448 38.4 38.4 0 0 1-41.642667 40.106667z" fill="#BBDCFF" p-id="8029"></path><path d="M809.64266697 552.10666698c0 15.018667-17.066667 30.037333-41.642667 30.037333a34.133333 34.133333 0 0 1-31.402667-30.037333 34.133333 34.133333 0 0 1 32.256-34.133334 37.546667 37.546667 0 0 1 40.789334 34.133334z m139.434666-34.133334a34.133333 34.133333 0 0 0-32.256 34.133334 32.768 32.768 0 0 0 32.256 30.037333 37.034667 37.034667 0 0 0 40.448-30.037333 36.864 36.864 0 0 0-40.448-33.450667z" fill="#FFD300" p-id="8030"></path><path d="M651.26399997 367.61599998a48.469333 48.469333 0 0 0 51.2-51.2 48.128 48.128 0 0 0-51.2-51.2 53.589333 53.589333 0 0 0-57.514667 51.2 54.101333 54.101333 0 0 0 57.514667 51.2z m0-80.725333a27.818667 27.818667 0 0 1 31.402667 30.208 28.330667 28.330667 0 0 1-31.402667 30.037333 34.133333 34.133333 0 0 1-37.034667-30.037333 34.133333 34.133333 0 0 1 37.034667-30.208z m-228.693333-20.48c-29.354667 0-59.733333 18.944-59.733334 51.2s31.061333 51.2 59.733334 51.2a50.176 50.176 0 0 0 51.2-51.2 48.981333 48.981333 0 0 0-51.2-51.2z m0 80.725333c-18.944 0-39.253333-12.117333-39.253334-30.037333s19.968-30.208 39.253334-30.208a29.013333 29.013333 0 0 1 31.402666 30.208 29.354667 29.354667 0 0 1-31.402666 30.037333z m228.352 85.333333c121.002667-86.528 202.410667-72.021333 203.093333-71.850666l15.189333 3.072-3.072-15.189334C838.99733297 216.57599998 703.65866697 127.99999998 529.91999997 127.99999998 340.47999997 127.99999998 191.99999997 254.12266698 191.99999997 415.06133298c0 85.333333 43.178667 161.109333 128.512 223.061334l-39.082667 116.565333 135.338667-68.266667a560.128 560.128 0 0 0 136.533333 18.432h13.482667l-3.584-12.970666c-1.706667-7.509333-44.202667-165.034667 88.064-259.413334z m-110.250667 250.88a555.349333 555.349333 0 0 1-122.197333-18.602666l-3.925334-1.024-97.621333 49.322666 27.136-82.773333-6.144-4.437333c-82.944-58.88-125.44-129.706667-125.44-210.773334C212.47999997 265.55733298 351.91466697 148.47999998 529.91999997 148.47999998c157.696 0 281.258667 75.946667 312.832 190.634667-30.549333-1.194667-104.618667 5.802667-203.776 76.629333-120.661333 86.528-106.154667 224.597333-98.304 267.605333z m605.525333-58.538666c0-134.314667-131.925333-247.808-288.085333-247.808S570.87999997 488.10666698 570.87999997 624.81066698s128.853333 247.978667 287.232 247.978666a328.021333 328.021333 0 0 0 75.434667-11.776l22.016-5.12 105.301333 59.904-27.306667-100.010666c72.704-55.296 112.64-122.88 112.64-190.976z m-130.389333 178.688l-6.144 4.096 18.773333 66.56-69.973333-39.765334h-3.754667l-26.453333 5.973334a305.834667 305.834667 0 0 1-70.656 11.264c-147.114667 0-266.752-102.4-266.752-227.498667s119.466667-227.328 266.752-227.328 268.117333 104.789333 268.117333 228.010667c0 85.333333-68.778667 148.48-109.909333 178.688zM767.99999997 508.41599998a44.202667 44.202667 0 0 0-42.496 43.690667 43.690667 43.690667 0 0 0 42.496 40.277333c28.672 0 51.2-18.090667 51.2-40.277333a47.274667 47.274667 0 0 0-51.2-43.690667z m0 63.488a23.552 23.552 0 0 1-22.016-19.797333 23.893333 23.893333 0 0 1 22.016-23.210667c17.066667 0 31.402667 10.069333 31.402667 23.210667 0 8.362667-11.605333 19.797333-31.402667 19.797333z m181.077333-63.488a43.690667 43.690667 0 0 0-41.813333 43.690667 43.008 43.008 0 0 0 42.496 40.277333c27.477333 0 51.2-18.432 51.2-40.277333a47.104 47.104 0 0 0-51.882667-43.690667z m0 63.488a21.504 21.504 0 1 1 0-43.008c17.066667 0 30.208 10.24 30.208 23.210667 0 8.021333-11.776 19.797333-30.208 19.797333z" fill="#3989FF" p-id="8031"></path></svg>
                </a>
                <a href="#"><svg class="icon" style="width: 2em;height: 2em;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14973"><path d="M214.101333 512c0-32.512 5.546667-63.701333 15.36-92.928L57.173333 290.218667A491.861333 491.861333 0 0 0 4.693333 512c0 79.701333 18.858667 154.88 52.394667 221.610667l172.202667-129.066667A290.56 290.56 0 0 1 214.101333 512" fill="#FBBC05" p-id="14974"></path><path d="M516.693333 216.192c72.106667 0 137.258667 25.002667 188.458667 65.962667L854.101333 136.533333C763.349333 59.178667 646.997333 11.392 516.693333 11.392c-202.325333 0-376.234667 113.28-459.52 278.826667l172.373334 128.853333c39.68-118.016 152.832-202.88 287.146666-202.88" fill="#EA4335" p-id="14975"></path><path d="M516.693333 807.808c-134.357333 0-247.509333-84.864-287.232-202.88l-172.288 128.853333c83.242667 165.546667 257.152 278.826667 459.52 278.826667 124.842667 0 244.053333-43.392 333.568-124.757333l-163.584-123.818667c-46.122667 28.458667-104.234667 43.776-170.026666 43.776" fill="#34A853" p-id="14976"></path><path d="M1005.397333 512c0-29.568-4.693333-61.44-11.648-91.008H516.650667V614.4h274.602666c-13.696 65.962667-51.072 116.650667-104.533333 149.632l163.541333 123.818667c93.994667-85.418667 155.136-212.650667 155.136-375.850667" fill="#4285F4" p-id="14977"></path></svg>
                </a>
                <a href="#"><svg class="icon" style="width: 2em;height: 2em;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15254"><path d="M535.239887 0h69.599248v238.178739h361.241768c24.082785-1.204139 56.233302 5.779868 55.751646 36.124177 4.455315 150.637817 0 301.636877 2.047037 452.395108 0 26.611477 0 68.635936-36.124177 68.997178-127.638758 4.575729-255.638758 0-383.277516 1.806209V1023.518344h-72.248354C355.341486 991.006585 177.610536 960.662277 0 928.752587V95.488241C178.453434 63.458137 356.906867 32.511759 535.239887 0z" fill="#0071C5" p-id="15255"></path><path d="M604.959548 273.821261H992.210724a58.64158 58.64158 0 0 1-19.747883 40.699906q-115.597366 110.660395-230.713076 221.32079C695.510818 493.697084 650.235183 448.903104 604.959548 405.433678zM249.377234 317.411101c65.625588-25.286924 142.329257 10.235183 170.144873 75.138288 38.0508 89.106303 32.511759 211.446849-42.867356 278.999059-69.478833 60.206961-185.919097 26.250235-217.467545-60.206962-41.663217-99.702728-21.433678-253.110066 90.190028-293.930385z" fill="#FFFFFF" p-id="15256"></path><path d="M778.355597 546.438382c70.080903-68.033866 140.643462-135.586077 210.965193-203.138288v418.799624H604.959548V450.709313c43.469426 39.254939 82.363123 84.289746 128.481656 120.413923 19.145814 3.010348 32.030103-13.727187 44.914393-24.684854z" fill="#FFFFFF" p-id="15257"></path><path d="M260.696143 389.057385a63.698965 63.698965 0 0 1 84.289746 31.548448 212.891816 212.891816 0 0 1 7.947319 154.370649c-10.837253 35.401693-48.165569 64.541863-85.253057 50.573847-45.757291-14.690499-59.604892-70.201317-60.206962-113.670743s9.271872-101.147695 53.222954-122.822201z" fill="#0071C5" p-id="15258"></path></svg>
                </a>
            </div>
        </div>
    </div>
    <script src="./js/vanilla-tilt.min.js"></script>
    <script src="./js/canvas.js"></script>
    <script>
        var userId = document.getElementById('account'),
            paswId = document.getElementById('pass'),
            ckbox = document.getElementById("ckbox"),
            shadow = document.getElementById("shadow"),
            ask = document.getElementById("ask");

        function toBlock() {
            ckbox.style.display = "block";
            shadow.style.display = "block";
        }

        function toNone() {
            ckbox.style.display = "none";
            shadow.style.display = "none";
        }

        $(function() {
            $("#showpswd").on("mouseover", function() {
                $("#pass").prop("type", "text");
            });
            $("#showpswd").on("mouseout", function() {
                $("#pass").prop("type", "password");
            });
            $(".icon").on("click", function() {
                toBlock();
                ask.innerText = "尚未开通";
            });
        });

        function enterMain() {
            if (userId.value === "") {
                toBlock();
                ask.innerText = "空用户名，请重新输入";
                return 0;
            } else if (paswId.value === "") {
                toBlock();
                ask.innerText = "空密码，请重新输入";
                return 0;
            } else {
                location = 'chat.html'
            }
        }
    </script>
</body>

</html>